<template>
  <div v-loading="loading" class="app-container">
    <div class="head-container">
      <el-form ref="searchform" :model="param" class="searchform" :rules="rules" :inline="true" size="mini" label-width="auto">
        <el-form-item label="查询时间：" prop="searchTime">
          <el-date-picker
            v-model="searchTime"
            type="daterange"
            value-format="yyyy/MM/dd"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="searchTimeChange"
          />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="param.deptNbr" placeholder="按部门号搜索" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
          <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-download" round @click="doExportExcel">导出Excel</el-button>
          <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top:15px">
      <el-form :model="resObj" class="searchform" size="mini" label-width="0px">
        <el-form-item prop="newItemCount">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">系统新品数：</span>
          <span class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.newItemCount }}</span>
        </el-form-item>
        <el-form-item prop="db2ItemCount">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">DB2新建商品数：</span>
          <span class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.db2ItemCount }}</span>
        </el-form-item>
        <el-form-item prop="itemFileCreatedItemCount">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">系统发送item file手工出号商品数：</span>
          <span class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.itemFileCreatedItemCount }}</span>
        </el-form-item>
        <el-form-item prop="automationCreatedItemCount">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">系统自动化出号商品数：</span>
          <span class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.automationCreatedItemCount }}</span>
        </el-form-item>
        <el-form-item prop="newItemOnlinePercent">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">新品线上率：</span>
          <span v-if="resObj.newItemOnlinePercent" class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.newItemOnlinePercent }}</span>
        </el-form-item>
        <el-form-item prop="newItemAutomationCreatePercent">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">新品自动化率：</span>
          <span v-if="resObj.newItemAutomationCreatePercent" class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.newItemAutomationCreatePercent }}</span>
        </el-form-item>
        <el-divider />
        <el-form-item prop="changeItemCount">
          <span class="filter-item" style="font-weight:bold;font-size:18px;">系统老品数：</span>
          <span class="filter-item" style="font-weight:bold;font-size:18px;">{{ resObj.changeItemCount }}</span>
        </el-form-item>
      </el-form>
      <el-divider />
      <newItemStatus ref="newItemStatus" :parent="parent" />
      <changeItemStatus ref="changeItemStatus" :parent="parent" />
    </div>
  </div>
</template>

<script>
import { initData } from '@/api/data'
import newItemStatus from '@/views/report/new-item/status-report'
import changeItemStatus from '@/views/report/change-item/status-report'
import { doDownload } from '@/api/download'

export default {
  components: { newItemStatus, changeItemStatus },
  data() {
    var timeVali = (rule, value, callback) => {
      if (!this.param.findTimeStart || !this.param.findTimeEnd) {
        callback(new Error('请选择查询时间段'))
      } else {
        callback()
      }
    }
    return {
      parent: this,
      loading: false,
      searchTime: [],
      param: {},
      resObj: { newItemCount: 0, changeItemCount: 0, db2ItemCount: 0, itemFileCreatedItemCount: 0, automationCreatedItemCount: 0, newItemOnlinePercent: '', newItemAutomationCreatePercent: '' },
      rules: {
        searchTime: [
          { validator: timeVali, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 日期组件触发
    searchTimeChange(val) {
      this.param.findTimeStart = val[0] + ' 00:00:00'
      this.param.findTimeEnd = val[1] + ' 23:59:59'
    },
    // 查询栏重置触发
    resetForm() {
      this.param = {}
      this.searchTime = []
    },
    // 查询
    toQuery() {
      this.$refs.searchform.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$refs.newItemStatus.toQuery()
          this.$refs.changeItemStatus.toQuery()
          initData('/report/getOverviews', this.param).then(res => {
            this.resObj = res
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        }
      })
    },
    // 批量导出
    doExportExcel() {
      this.$refs.searchform.validate((valid) => {
        if (valid) {
          this.loading = true
          doDownload('/report/exportOverviewsData', JSON.stringify(this.param), this.searchTime[0] + '-' + this.searchTime[1] + '.xlsx').then(() => {
            this.loading = false
          }, error => {
            console.log(error)
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
